<template>
  <el-drawer custom-class="base_drawer" v-model="drawer" :close-on-click-modal="false" :title="title"
    :with-header="true" :size="720">
    <div class="right m_b_15">
      <el-input class="input_width" v-model="name" @change="searchName" placeholder="酒店名称" :suffix-icon="Search" />
    </div>

    <DataCollectTable :data="data" :isRoute="false" :total="total" :config="config" @operationsHander="opHander.receive"
      @pageChange="pageChange" />

  </el-drawer>
</template>

<script setup>
import { defineProps, ref, defineExpose, defineEmits } from "vue";
import { OP_KEY, COLUMN_TYPE, OPERATIONS, operationsHander } from "@com/table/tableOperations";
// import data from "@/test/selectRoom.json"
import { Search } from '@element-plus/icons-vue'
import api from "@api/hotel"
const props = defineProps({
  title: String,
})
const emit = defineEmits(['select'])

const data = ref([])
const total = ref(0)
const drawer = ref(false)
function open() {
  drawer.value = true
}
function close() {
  drawer.value = false
}

function goodsOperations() {
  return [OPERATIONS.select]
}

const config = {
  showIndex: true,
  operations: {
    label: '选择',
    width: 60,
    operations: goodsOperations
  },
  column: [
    {
      label: '酒店图片',
      prop: 'hotelMainPic',
      type: COLUMN_TYPE.picture,
      width: 100,
    },
    {
      label: '酒店名称',
      prop: 'hotelName',
    }, {
      label: '房型名称',
      prop: 'hotelRoomName',
      width: 100,
    }, {
      label: '可住人数',
      prop: 'peopleNum',
      width: 100
    }
  ]
}

const opHander = operationsHander()
opHander.install(OP_KEY.select, (data) => {
  emit('select', data)
  close()
})

var page = null
var size = null
const name = ref()

function pageChange(type, val) {
  if (type == 'page') {
    page = val
  } else if (type == 'size') {
    size = val
  }
  getData()
}

function searchName() {
  getData()
}

getData()

function getData() {
  api.roomList({
    name: name.value,
    page: page,
    size: size
  }, val => {
    total.value = val.total
    data.value = val.itemList
  })
}

defineExpose({ open })
</script>
<style lang="scss">
.right {
  text-align: right;
}

.input_width {
  width: 160px;
}

.m_b_15 {
  margin-bottom: 15px;
}
</style>

